<template>
	<view class="ticket-holder">
		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#4786fe" :activeStyle="{
          color: '#2f75fa',
        }" :inactiveStyle="{
          color: '#353535',
        }" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>

		<!-- <view class="list" v-if="list.length" :class="{ lapse: currentTab === 1 }">
			<view :class="[
          'item d-flex justify-space-between flex-column',
          {
            'disbled-ticket': currentTab === 1,
          },
        ]" v-for="item in list" :key="item.id" @click="goQrcode(item)">
				<view>
					<view v-if="currentTab === 0">
						<view class="qrcode pa">
							<u-image :src="`${assetsPath}c7595f4c16837f46299d18b7b767b948073978b9.png`" width="52rpx"
								height="52rpx"></u-image>
						</view>
					</view> -->
		<!-- <navigator
						:url="`/pages/personal/qrcode/qrcode?goods_name=${item.goods_name}&ticketno=${item.ticketno}&title=我的票包&choose=选择票&goods_image=${item.goods_image}`"
						v-if="currentTab === 0">
						<view class="qrcode pa">
							<u-image :src="`${assetsPath}c7595f4c16837f46299d18b7b767b948073978b9.png`" width="52rpx"
								height="52rpx"></u-image>
						</view>
					</navigator> -->
		<!-- <view class="flex-align">
						<u-image :src="item.venue_thumb" width="56rpx" height="56rpx" shape="square"></u-image>
						<view style="
                margin-left: 13rpx;
                color: #fff;
                width: 524rpx;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              ">{{ item.venue_name }}</view>
					</view>
					<view class="flex-align name">
						<view class="round"></view>
						<view class="ticketName">{{ item.goods_name }}</view>
					</view>
					<view class="flex-align"> -->
		<!-- <u-tag
              text="进场时间 11:00-12:00"
              bgColor="#fff"
              color="rgb(53,121,250)"
              borderColor="rgba(0,0,0,0)"
              size="mini"
            ></u-tag> -->
		<!-- <view style="margin-left: 9rpx">
              <u-tag
                text="节假日"
                bgColor="#fff"
                color="rgb(53,121,250)"
                borderColor="rgba(0,0,0,0)"
                size="mini"
              ></u-tag>
            </view> -->

		<!-- <view style="margin-left: 9rpx" v-for="(item1,index1) in item.consumption_type" :key="index1">
							<u-tag :text="item1" bgColor="#fff" color="rgb(53,121,250)" borderColor="rgba(0,0,0,0)"
								size="mini"></u-tag>
						</view>
					</view>
				</view>

				<view class="line pa"></view>

				<view class="flex-between">
					<view class="minute"> -->
		<!-- <text class="bold">90</text> -->
		<!-- 90天 -->
		<!-- </view>
					<view class="expiration" v-if="item.specify == null">
						有效期至{{ addDate(item.starttime, item.days) }}
					</view>

					<view class="expiration" v-else>
						有效期至{{ item.enddate }}
					</view>
				</view>
				
			</view>
		</view>
 -->
	<view class="list" v-if="list.length" >
		<view  v-if="currentTab === 0">
			<!-- @click="goQrcode(item)" -->
			<view class="card-pack-item pr"
				:style="{ backgroundImage: `url(${assetsPath}${item.inventory === 0 ? 'dd094419c06505ea3edb73a2cfdbe59a19fb8051' : '5f02c7ef74bbed9aa39718a8e173dbdbaf59d2c8'}.png)` }" v-for="item in list" :key="item.id" >
				<view class="flex-align">
					<!-- <u-image :src="item.venue_thumb" width="56rpx" height="56rpx" shape="square"></u-image> -->
					<u-image :src="`${assetsPath}f0d9a5af94d5830bf6b6e97ce69eddd62415923d.png`" width="30rpx" height="30rpx" shape="square"></u-image>
					<view style="margin-left: 13rpx;">{{ item.venue_name }}</view>
				</view>
				<view >
					<navigator :url="`/pages/personal/qrcode/qrcode?goods_name=${item.goods_name}&ticketno=${item.ticket_no}&title=我的票包&choose=选择票&goods_image=${item.goods_image}`"
							v-if="currentTab === 0" style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;">
						<view class="qrcode">
							<u-image :src="`${assetsPath}471fbc0270836819ce3cf990613a3592d1bf581b.png`" width="52rpx"
								height="52rpx"></u-image>
						</view>
					</navigator>
			
					<view @click="$emit('click')">
						<!-- <view class="flex-between" style="margin: 0rpx 0 30rpx;">
							<view style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #97b717 ;font-size: 26rpx;text-align: center;line-height: 40rpx;" ><text>预约</text> </view>
							<view class="name">{{ item.goods_name }}</view>
						</view> -->
						<view class="flex-align">
							<view style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #ffaa00 ;font-size: 26rpx;text-align: center;line-height: 40rpx;" v-if="item.inventory === 0"><text>预约</text> </view>
							<view class="name" >{{ item.goods_name }}</view>
						</view>
						<view class="flex-align">
							<view class="name" style="margin-top: 20rpx;">no.{{ item.ticket_no }}</view>
						</view>
						<!-- <view class="name"v-if="item.inventory === 0" >有效期{{ item.sku_info }}</view> -->
						<view class="flex-between bottom">
							<!-- <view v-if="item.yxq != '长期有效'">
								{{item.days}}次
							</view>
							<view v-else>
								
							</view> -->
							<view>
								{{item.days}}次
							</view>
							<!-- <view class="date" v-if="item.specify == null">有效期至{{ addDate(item.starttime, item.days) }}</view> -->
							<!-- <view class="date" v-if="item.inventory === 0" >有效期{{ item.sku_info }}</view> -->
							<view class="date"   v-if="item.is_yxq == null && item.inventory == 1">长期有效</view>
							<view class="date"  v-else>{{ item.yxq }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view  v-if="currentTab === 1">
			<view class="card-pack-item pr" v-if="item.zt == 0"
				:style="{ backgroundImage: `url(${assetsPath}${'e51fd7328fd338ffcfc33c78be69122ff7a86138'}.png)` }" v-for="item in list" :key="item.id" >
				<view class="flex-align">
					<!-- <u-image :src="item.venue_thumb" width="56rpx" height="56rpx" shape="square"></u-image> -->
					<u-image :src="`${assetsPath}f0d9a5af94d5830bf6b6e97ce69eddd62415923d.png`" width="30rpx" height="30rpx" shape="square"></u-image>
					<view style="margin-left: 13rpx;">{{ item.venue_name }}</view>
					
				</view>
				<view >
					
					<view class=""  style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;"></view>
					<view >
						<!-- <view class="flex-between" style="margin: 0rpx 0 30rpx;">
							<view class="name">{{ item.goods_name }}</view>
						</view> -->
						<!-- <view class="flex-between bottom">
							<view>
								{{item.days}}天
							</view>
							
							<view class="date" v-if="item.specify == null">有效期至{{ addDate(item.starttime, item.days) }}</view>
							<view class="date" >有效期至{{ item.enddate }}</view>
						</view> -->
						<view class="flex-align">
							<view style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #cecece ;font-size: 26rpx;text-align: center;line-height: 40rpx;" v-if="item.inventory === 0"><text>预约</text> </view>
							<view class="name" >{{ item.goods_name }}</view>
						</view>
						<view class="flex-align">
							<view class="name" style="margin-top: 20rpx;">no.{{ item.ticket_no }}</view>
						</view>
						<view class="flex-between bottom">
							<view v-if="item.yxq != '长期有效'">
								{{item.days}}次
							</view>
							<view v-else>
								
							</view>
							
							<!-- <view class="date" v-if="item.specify == null">有效期至{{ addDate(item.starttime, item.days) }}</view> -->
							<!-- <view class="date" v-if="item.inventory === 0" >有效期{{ item.sku_info }}</view> -->
							<view class="date"   v-if="item.is_yxq != null">{{ item.yxq }}</view>
							<view class="date"   v-if="item.is_yxq == null && item.inventory == 1">长期有效</view>
						</view>
					</view>
				</view>
				
			
			</view>
			<view class="card-pack-item pr" v-if="item.zt == 1"
				:style="{ backgroundImage: `url(${assetsPath}${'9fdd5512f7b4ea94c303930e3ce0264f0f1595c5'}.png)` }" v-for="item in list" :key="item.id" >
				<view class="flex-align">
					<!-- <u-image :src="item.venue_thumb" width="56rpx" height="56rpx" shape="square"></u-image> -->
					<u-image :src="`${assetsPath}f0d9a5af94d5830bf6b6e97ce69eddd62415923d.png`" width="30rpx" height="30rpx" shape="square"></u-image>
					<view style="margin-left: 13rpx;">{{ item.venue_name }}</view>
					
				</view>
				<view >
					
					<view class=""  style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;"></view>
					<view >
						<!-- <view class="flex-between" style="margin: 0rpx 0 30rpx;">
							<view class="name">{{ item.goods_name }}</view>
						</view> -->
						<!-- <view class="flex-between bottom">
							<view>
								{{item.days}}天
							</view>
							
							<view class="date" v-if="item.specify == null">有效期至{{ addDate(item.starttime, item.days) }}</view>
							<view class="date" >有效期至{{ item.enddate }}</view>
						</view> -->
						<view class="flex-align">
							<view style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #cecece ;font-size: 26rpx;text-align: center;line-height: 40rpx;" v-if="item.inventory === 0"><text>预约</text> </view>
							<view class="name" >{{ item.goods_name }}</view>
						</view>
						<view class="flex-align">
							<view class="name" style="margin-top: 20rpx;">no.{{ item.ticket_no }}</view>
						</view>
						<view class="flex-between bottom">
							<view v-if="item.yxq != '长期有效'">
								{{item.days}}次
							</view>
							<view v-else>
								
							</view>
							
							<!-- <view class="date" v-if="item.specify == null">有效期至{{ addDate(item.starttime, item.days) }}</view> -->
							<!-- <view class="date" v-if="item.inventory === 0" >有效期{{ item.sku_info }}</view> -->
							<view class="date"   v-if="item.is_yxq != null">{{ item.yxq }}</view>
							<view class="date"   v-if="item.is_yxq == null && item.inventory == 1">长期有效</view>
						</view>
					</view>
				</view>
				
			
			</view>
		</view>
		
		</view>
		<u-empty v-else text="暂无数据" icon="https://sass-test.doit10019.com/upload/202501/08114139-33838600519097990.jpg?attname=coupon.jpg" />
	</view>
</template>

<script>
	const person = require("@/api/personal/index.js");
	export default {
		data() {
			return {
				assetsPath: this.$https.assetsPath,
				currentTab: 0,
				tabsList: [{
					name: "待使用"
				},
				// {
				// 	name: "待结账"
				// },
				{
					name: "已结束"
				}],
				list: [],
				listQuery: { //分页
					limit:5,
					page: 1,
				},
				totalPage:""

			};
		},
		onLoad(options) {
			this.getTicketList();
		},
		methods: {
			goQrcode(item) {
				uni.navigateTo({
					url: `/pages/personal/qrcode/qrcode?goods_name=${item.goods_name}&ticketno=${item.ticket_no}&title=我的票包&choose=选择票&goods_image=${item.goods_image}`
				})
			},
			// 日期加指定天数
			addDate(date, days) {
				let date1 = new Date(date);
				date1.setDate(date1.getDate() + days);
				let month = date1.getMonth() + 1;
				let day = date1.getDate();
				let year = date1.getFullYear();
				if (month < 10) {
					month = "0" + month;
				}
				if (day < 10) {
					day = "0" + day;
				}
				return year + "-" + month + "-" + day;
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
				this.list = []
				this.listQuery.page = 1
				this.getTicketList();

			},
			// 获取票据列表
			async getTicketList() {
				let that = this;
				if (this.listQuery.page === 1) that.list = [];
				let postData = {
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
					expired: this.currentTab,
					page: this.listQuery.page,
					limit: this.listQuery.limit,
				};
				let res = await person.getMyTicket(postData);
				if (res.code === 1) {
					// this.list = res.data.ticketData;
					this.list = this.list.concat(res.data.ticketData); //将数据拼接在一起
					that.totalPage = res.data.page
				}
			},
			// 下拉刷新
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				
					if (this.totalPage <= this.listQuery.page) {
						// uni.hideLoading();
						uni.showToast({
							title: '没有更多了',
							duration: 2000,
							icon: 'none'
						});
						return
					}
					this.listQuery.page += 1;
					this.getTicketList()
				}
			
		},
	};
</script>

<style lang="scss" scoped>
	.ticket-holder {
		padding-bottom: env(safe-area-inset-bottom);
		background-color: rgb(249, 249, 249);
		min-height: 100vh;

		/deep/.u-tabs {
			background-color: #fff;
			border-bottom: 1px solid #e5e5e5;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		.list {
			padding: 30rpx;
		}

		card-pack-item+card-pack-item {
			.card-pack-item {
				margin-top: 30rpx;
			}
		}
		
		.card-pack-item {
			color: #fff;
			width: 690rpx;
			height: 296rpx;
			padding: 18rpx 30rpx 50rpx 18rpx;
			background-position: left top;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		
			&+.card-pack-item {
				margin-top: 30rpx;
			}
		
			&.lapse {
		
				.bottom,
				.balance {
					color: #fff !important;
				}
			}
		
			.number {
				text {
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		
			.name {
				font-size: 32rpx;
				padding-left: 15rpx;
			}
		
			.bottom {
				color: #fff !important;
				font-size: 28rpx;
				padding-top: 45rpx;
				.balance {
					font-size: 48rpx;
					color: #fff !important;
					margin-right: 10rpx;
					font-weight: bold;
				}
			}
		
			.qrcode {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}
		}



		.item {
			padding: 20rpx 30rpx;
			position: relative;
			height: 290rpx;
			background-color: #2f75fa;
			// filter: drop-shadow(0px 13rpx 57rpx rgba(8,73,162,0.11));
			border-radius: 20rpx;

			&+.item {
				margin-top: 30rpx;
			}

			&::after,
			&::before {
				content: "";
				position: absolute;
				top: 192rpx;
				border-radius: 50%;
				background-color: rgb(249, 249, 249);
				width: 30rpx;
				height: 30rpx;
				z-index: 1;
			}

			&::after {
				left: -15rpx;
			}

			&::before {
				right: -15rpx;
			}

			.line {
				top: 207rpx;
				left: 0;
				border-top: 1rpx dashed #fff;
				width: 100%;
			}

			.name {
				font-size: 40rpx;
				font-weight: bold;
				margin: 10rpx 0;
				color: #fff;

				.ticketName {
					width: 611rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.round {
					width: 20rpx;
					height: 20rpx;
					margin-right: 11rpx;
					background-color: rgb(47, 117, 250);
					border-radius: 50%;
				}
			}

			.minute {
				line-height: 34rpx;
				font-size: 26rpx;
				color: #fff;

				text {
					font-size: 44rpx;
				}
			}

			.expiration {
				font-size: 28rpx;
				color: #fff;
			}

			.bottom {
				font-size: 28rpx;
				margin-top: 40rpx;
				color: rgb(153, 153, 153);
			}

			.qrcode {
				right: 10rpx;
				top: 10rpx;
			}
		}


	}

	.disbled-ticket {
		// opacity: 0.6;
	}
</style>
